<template>
	<view class="list_content">
		<g-watermark />
		<view class="list_content_search">
			<slot name="search"></slot>
		</view>
		<view class="list_content_body">
			<view class="list_content_body_box">
				<uni-swipe-action ref="swipeAction">
					<uni-swipe-action-item v-for="(item, index) in list" :key="index" style="margin-bottom: 20rpx;">
						<view class="content_box" @longpress="handleLongpress">
							<view class="content_box_checkbox" v-if="isChecked">
								<u-checkbox @change="checkboxChange($event,item)" v-model="item.checked"
									style="width: 20px;"></u-checkbox>
							</view>
							<view class="content_box_con" @click="itemClick(item,index)">
								<slot name="content" :item="item"></slot>
							</view>
						</view>
						<template slot="right">
							<view class="slot-button">
								<view class="slot-button-con" style="background-color:#0960bd"
									@click="swipeClick({content:{text:'转发'}},index,item)" v-if="type!='garbageBinbox'">
									<text class="slot-button-text">转发</text>
								</view>
								<view class="slot-button-con" style="background-color:#ff5a5f"
									@click="swipeClick({content:{text:'删除'}},index,item)"
									v-if="type=='inbox'||type=='draftbox'||type=='garbageBinbox'">
									<text class="slot-button-text">删除</text>
								</view>
							</view>
						</template>
					</uni-swipe-action-item>
				</uni-swipe-action>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			type: {
				type: String,
				default: ''
			},
			url: {
				type: Object,
				default: () => {
					return {}
				}
			},
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			isChecked: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {}
		},
		methods: {
			itemClick(record) {
				console.log("record", record)
				this.$emit("click", record)
			},
			//改变checkbox状态
			checkboxChange(e, item) {
				console.log("e", e)
				item.checked = e.value
				this.$emit("update:list", this.list)
				this.$forceUpdate()
			},
			//长按
			handleLongpress() {
				this.$emit('update:isChecked', true)
			},
			swipeClick(e, index, item) {
				let {
					content
				} = e;
				if (content.text == '编辑') {
					this.$emit('edit', item)
				} else if (content.text == '查看') {
					this.$emit('look', item)
				} else if (content.text === "删除") {
					this.$emit('delete', item)
				} else if (content.text === "转发") {
					this.$emit('transmit', item)
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.list_content {
		&_search {}

		&_body {
			margin-top: 20rpx;
			padding: 0 20rpx;

			&_box {
				.content_box {
					display: flex;
					justify-content: space-between;
					gap: 20rpx;

					&_checkbox {
						width: 80rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;
					}

					&_con {
						flex: 1;
					}
				}
			}
		}
	}

	.slot-button {
		/* #ifndef APP-NVUE */
		display: flex;
		height: 100%;
		/* #endif */
		flex: 1;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		background-color: transparent;
		padding-bottom: 20rpx;

		.slot-button-con {
			height: 100%;
			width: 100%;
			padding: 0 20upx;
			//   border-radius: 16upx;
			/* #ifndef APP-NVUE */
			display: flex;
			height: 100%;
			/* #endif */
			display: flex;
			// flex: 1;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			margin-right: 10rpx;
			margin-left: 10rpx;
		}

		.slot-button-text {
			color: #ffffff;
			font-size: 14px;
		}
	}
</style>